<template>
    <div class="workpage">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[2, 4, 5, 7, 8, 10]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="10" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useHomeStore } from '@/stores/HomeStore';
import { storeToRefs } from 'pinia';

const homeStore = useHomeStore();
const { workDatas, page, limit } = storeToRefs(homeStore);
const { getworktable } = homeStore;
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    limit.value = val
    getworktable()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    getworktable()
}
</script>

<style scoped>
@import url('@/assets/Home/Home.css');

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>